<template>
  <div class="my-data">
    <div class="my-data-detail">
      <!-- 导航标签 -->
      <div class="my-data-detail-head">
        <p class="my-data-detail-head-nav">
          <a href="javascript:;" @click.stop="click2ReturnAdminData"> 所有作品 </a>
          <el-icon><caret-right /></el-icon>
          <a href="javascript:;">{{
            curSiteData && curSiteData.name ? curSiteData.name : ""
          }}</a>
        </p>
      </div>

      <!-- tabs 分页 -->
      <div class="my-data-content-con">
        <!-- 分 tab 管理：表单数据/数据分析/推广监测/推广标识生成 -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="表单数据" name="first">
            <!-- 表单数据 -->
            <FormData :site_id="curSiteId"></FormData>
          </el-tab-pane>

          <el-tab-pane label="数据分析" name="second">
            <!-- 数据分析 -->
            <DataAnalysis :site_id="curSiteId"></DataAnalysis>
          </el-tab-pane>

          <el-tab-pane label="推广监测" name="third">
            <!-- 推广监测 -->
            <PopularizeCheck :site_id="curSiteId" :active="activeName"></PopularizeCheck>
          </el-tab-pane>

          <el-tab-pane label="推广标识生成" name="fourth">
            <!-- 推广标识生成 -->
            <PopularizeMark :site_id="curSiteId"></PopularizeMark>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import PopularizeMark from "@/views/child/admin/admin-data/popularize-mark.vue";
import FormData from "@/views/child/admin/admin-data/form-data.vue";
import DataAnalysis from "@/views/child/admin/admin-data/data-analysis.vue";
import PopularizeCheck from "@/views/child/admin/admin-data/popularize-check.vue";
import { useWebUserStore } from "@/store/web/user";
import { useWebSiteStore } from "@/store/web/site";
const useWebUser = useWebUserStore();
export default {
  setup() {
    return {
      pageSize: 20,
      curSiteId: "",

      // 分 tab 管理：表单数据/数据分析/推广监测/推广标识生成
      activeName: "first", // first / second / third / fourth
    };
  },
  computed: {
    lists() {
      return useWebUser.myLists;
    },
    curSiteData() {
      return useWebUser.mySite4Data;
    },
  },
  components: {
    PopularizeMark,
    FormData,
    DataAnalysis,
    PopularizeCheck,
  },
  beforeMount() {
    const useWebSite = useWebSiteStore();
    // site_id
    this.curSiteId = this.$route.query.site_id;

    // 获取 站点数据
    useWebUser.getMySite4Data({
      site_id: this.curSiteId,
    });

    // 获取 站点数据（目的：1. 用于判断获取 isLottery）
    useWebSite.getSiteDatas({
      item: {
        site_id: this.curSiteId,
      },
      isTempPreviewUrl: false,
    });
  },
  methods: {
    click2ReturnAdminData() {
      // 返回 数据统计 首页
      // window.history.go(-1);  // 不能保存表单数据和分页数据
      // TODO：search 搜索结果加上
      const curPage = this.$route.query.page || 1;
      this.$router.push({ path: `/admin/data`, query: { page: curPage } });
    },
    handleClick() {
      // do nothing
      // tab, event
      // console.log(tab, event);
    },
  },
};
</script>

<style lang="scss" scoped>
.my-data-detail-head-nav {
  padding: 0 15px;

  a:first-child:hover {
    color: #409eff;
    cursor: pointer;
  }
}
</style>
